<template>
  <n-card class="udp-login">
    <div class="udp-login-bg">
      <i class="orange"></i>
      <i class="green"></i>
      <i class="theme-left"></i>
      <i class="theme-right"></i>
      <span class="mark"></span>
    </div>
    <div class="udp-login-top">
      <div class="udp-login-logo">
        <img class="logo" :src="logoUrl" />
        <p class="title">统一开发平台</p>
      </div>
    </div>
    <div class="udp-login-content">
      <transition name="move" enter-from-class="move-left-enter" leave-to-class="move-left-leave-to">
        <div v-if="show" class="udp-login-title">
          <h2 class="udp-login-title-name">{{ appName }}</h2>
          <p class="udp-login-title-sub">{{ appNameSub }}</p>
          <LoginBackground style="font-size: 19vw" />
        </div>
      </transition>
      <transition name="move" enter-from-class="move-right-enter" leave-to-class="move-right-leave-to">
        <div v-if="show" class="udp-login-form">
          <n-tabs type="line" justify-content="space-evenly">
            <template v-if="loginType !== '2'">
              <n-tab-pane name="user" tab="账号登录">
                <LoginForm />
              </n-tab-pane>
            </template>
            <template v-if="loginType !== '1'">
              <n-tab-pane name="IAM" tab="IAM登录">
                <LoginIAM />
              </n-tab-pane>
            </template>
          </n-tabs>
        </div>
      </transition>
    </div>
  </n-card>
</template>
<script lang="ts">
  import { defineComponent, computed, ref } from 'vue'
  import { udpAppStore } from 'udp/store/app-store'
  import { udpUserStore } from 'udp/store/user-store'
  import { addColorAlpha, getColorPalette } from 'udp/utils/color'
  import LoginForm from 'udp/views/login/login-form.vue'
  import LoginIAM from 'udp/views/login/login-IAM.vue'
  import logoUrl from '/static/logo.png'
  import LoginBackground from './login-background.vue'
  
  export default defineComponent({
    name: 'Login',
    components: { LoginForm, LoginIAM, LoginBackground },
    setup() {
      // 系统名称
      const UserStore = udpUserStore()
      const loginType = computed(() => UserStore.envMap.UDP_LOGIN_TYPE || import.meta.env.UDP_LOGIN_TYPE)
      // theme-渐变
      const appStore = udpAppStore()
      const theme = computed(() => appStore.theme)
      const linearGradient = computed(
        () =>
          `linear-gradient(180deg, ${addColorAlpha(theme.value, 0.15)} 0%, ${addColorAlpha(theme.value, 0.02)} 100%)`
      )
      const themeOpcity = computed(() => addColorAlpha(theme.value, 0.3))
      // themeMode
      const themeLight = computed(() => appStore.themeMode !== 'dark')
      const modeShadow = computed(() =>
        themeLight?.value ? getColorPalette('#EDF1F5', 6) : getColorPalette('#18181c', 6.3)
      )
      // 动画
      const show = ref(false)

      return {
        appName: computed(() => (UserStore.envMap.UDP_TITLE || import.meta.env.UDP_TITLE)),
        appNameSub: computed(() => UserStore.envMap.UDP_TITLE_SUB || import.meta.env.UDP_TITLE_SUB),
        logoUrl,
        linearGradient,
        modeShadow,
        loginType,
        themeOpcity,
        theme,
        show
      }
    },
    mounted() {
      // 动画
      this.show = true
    }
  })
</script>
<style lang="less" scoped>
  @shadow-color: v-bind(modeShadow);
  @linear-gradient: v-bind(linearGradient);
  .move-enter-active,
  .move-leave-active {
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
  .move-left-enter,
  .move-left-leave-to {
    transform: translateX(-100px);
  }
  .move-right-enter,
  .move-right-leave-to {
    transform: translateX(100px);
  }

  .udp-login {
    position: relative;
    height: 100vh;
    padding: 0;
    overflow: hidden;

    &.n-card > :deep(.n-card__content:first-child) {
      padding: 0;
    }
  }

  .udp-login-bg {
    > i {
      position: absolute;
      aspect-ratio: 1;
      border-radius: 100%;
    }
    .orange {
      width: 24.5%;
      background: rgba(233, 138, 68, 0.3);
      left: 20%;
      top: -78px;
    }
    .green {
      width: 42%;
      background: rgba(161, 233, 68, 0.3);
      left: 52%;
      bottom: 0;
      transform: translateY(60%);
    }
    .theme-left {
      width: 34%;
      background: v-bind(themeOpcity);
      left: -2.5%;
      bottom: -3.3%;
    }
    .theme-right {
      width: 34%;
      background: v-bind(themeOpcity);
      right: 2.5%;
      top: -10%;
    }
    .mark {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      background: @linear-gradient;
      backdrop-filter: blur(240px);
    }
  }

  .udp-login-top {
    position: absolute;
    z-index: 2;
    padding: 24px 22px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    .udp-login-logo {
      display: flex;
      align-items: center;
      .logo {
        width: 22px;
        height: 22px;
        padding: 3px;
        border: 1px solid @shadow-color;
        border-radius: 50%;
        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.08);
        background: #fff;
      }
      .title {
        font-size: 1.15vw;
        color: v-bind(theme);
        padding: 0;
        margin: 0 0 0 8px;
      }
    }
    :deep(.n-base-selection .n-base-selection-label) {
      background: rgba(0, 0, 0, 0);
    }
    :deep(.n-base-selection__border),
    :deep(.n-base-selection__state-border) {
      display: none;
    }
    :deep(.n-base-selection .n-base-selection-label .n-base-selection-input .n-base-selection-input__content),
    :deep(.n-base-selection .n-base-suffix .n-base-suffix__arrow) {
      color: v-bind(theme);
    }
  }

  .udp-login-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -45%);
    z-index: 2;
    display: flex;
    width: 100%;
    padding: 0 19%;
    box-sizing: border-box;
    justify-content: center;
    align-items: stretch;

    > div {
      flex: 1;
    }
  }

  .udp-login-title {
    padding-right: 90px;

    .udp-login-title-name {
      margin: 0 0 14px 0;
      font-size: 2vw;
      color: v-bind(theme);
    }

    .udp-login-title-sub {
      margin: 0 0 3.4% 0;
      font-size: 14px;
      line-height: 22px;
      letter-spacing: 2px;
      color: v-bind(theme);
      word-break: break-all;
    }
  }

  .udp-login-form {
    max-width: 23vw;
    padding: 3vw 2vw 4vw;
    text-align: center;
    background: var(--n-color);
    border-radius: 8px;
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 8%);
    box-sizing: border-box;
    position: relative;

    .copyright {
      font-size: 12px;
      color: #cccccc;
      line-height: 17px;
      position: absolute;
      bottom: 1vw;
      left: 50%;
      transform: translateX(-50%);
    }

    :deep(.n-tabs-bar) {
      background: rgba(0, 0, 0, 0);

      &::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 20px;
        height: 3px;
        background: var(--n-bar-color);
        border-radius: 100px 100px 0 0;
        content: '';
        transform: translateX(-50%);
      }
    }

    :deep(.n-tab-pane) {
      padding-top: 36px;
      text-align: left;
    }

    :deep(.anticon) {
      color: var(--n-bar-color);
    }

    :deep(.n-form-item .n-form-item-feedback-wrapper) {
      min-height: 1.7vw;
    }
  }
  :deep(.n-input input.n-input__input-el) {
    height: 2.3vw;
    line-height: 2.3vw;
    min-height: 32px;
  }
  :deep(button.n-button) {
    height: 2.3vw;
    font-size: 16px;
    min-height: 32px;
    margin-top: 20px;
  }
</style>
